---
description: Компонент для выбора даты и времени, поддерживает различные режимы работы, настройку ограничений по датам и локализацию.
---

<Overview group="dates">

# Calendar [tag:component]

Компонент для выбора даты и времени, поддерживает различные режимы работы, настройку ограничений по датам и локализацию.

</Overview>

<Playground>
  ```jsx
  <Calendar />
  ```
</Playground>

## Применение компонента

> Старайтесь использовать на мобильных устройствах уменьшенную версию компонента (свойство `size="s"`).

Данный компонент представляет собой непосредственно календарь, который необходимо встраивать в нужные части вашего приложения.

Если вам нужно поле ввода даты и времени (со всплывающим календарём), то используйте компонент [`DateInput`](/components/date-input).

Если вам нужен компонент для задания диапазона дат и времени, то используйте [`CalendarRange`](/components/calendar-range).

## Режим работы

Компонент поддерживает работу как в неконтролируемом режиме, так и контролируемом. Это стандартное поведение
React-компонентов, прочитать про это можно в [документации React](https://react.dev/reference/react-dom/components/input#controlling-an-input-with-a-state-variable).

Для использования неконтролируемого режима достаточно просто _не_ передавать `value` или передавать `defaultValue`, если
требуется задать значение по умолчанию.
Для контролируемого режима используйте связку свойств `value`/`onChange` для задания значения и его изменения.

```jsx
// Неконтролируемое состояние
<Calendar defaultValue={new Date()} />;

// Контролируемое состояние
const [date, setDate] = React.useState(new Date());

<Calendar value={date} onChange={setDate} />;
```

## Выбор времени

Для включения выбора времени используйте свойство `enableTime`.

> Обратите внимание, что выбор времени недоступен при `size="s"`.

<Playground>
  ```jsx
  <Calendar defaultValue={new Date()} enableTime />
  ```
</Playground>

## Часовые пояса

Компонент поддерживает работу с часовыми поясами через свойство `timezone`
(принимает сроку в [IANA](https://data.iana.org/time-zones/tzdb-2021a/zone1970.tab)).
При указании часового пояса все даты автоматически конвертируются в указанный часовой пояс.

## Локализация

Компонент поддерживает настройку текстов через `changeDayLabel`, `changeHoursLabel` и остальные `*Label` свойства.

> Название месяцев и дней недели определяется исходя из значения `locale` в `ConfigProvider`.

## Доступность (a11y) [#a11y]

Компонент обеспечивает базовую доступность через:

- корректную семантическую разметку;
- поддержку клавиатурной навигации;
- `aria`-атрибуты для всех интерактивных элементов.

При использовании компонента убедитесь, что все текстовые метки
(`changeDayLabel`, `changeHoursLabel` и остальные `*Label` свойства) корректно описывают действия для пользователей скринридеров.

## Свойства и методы [#api]

<PropsTable name="Calendar" />
